<template>
    <div class="container">
        <header class="navbar">
            <a href="javascript:;" class="arrow_back" @click="goback">
                <img src="../assets/images/arrow_back.png" alt="">
            </a>
            <span class="nav_header">注册账号</span>
            <a href="javascript:;" class="choose_moreitems dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <img src="../assets/images/choose_moreitems.png" alt="">
            </a>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                <li><router-link to="/"> <img src="../assets/images/home.png" alt=""> 首页</router-link></li>
                <li><router-link to="/login"> <img src="../assets/images/man.png" alt=""> 我的</router-link></li>
                <li><router-link to="/"> <img src="../assets/images/search1.png" alt=""> 搜索</router-link></li>
            </ul>
        </header>
        <div class="orders">
            <ul>
                <li>输入手机号</li>
                <li>输入验证码</li>
                <li>设置密码</li>
            </ul>
        </div>
        <div class="input_phonenumber">
            <input type="text" placeholder="请输入您的手机号">
        </div>
        <div class="btn-wrapper">
            <input type="checkbox">
            <span>我已阅读并同意<a class="protocol">《美团网用户协议》</a></span>
        </div>
        <div class="get_verify_code">
            <button>获取验证码</button>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            goback(){
                this.$router.go(-1);
            }
        }
    }
</script>

<style scoped>
    .container {
        background-color: #F0EFED;
    }
    header.navbar {
        display: flex;
        height: 50.5px;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        background-image: linear-gradient(135deg, #ffd000 0%, #ffbd00 100%);
    }
    header>.arrow_back {
        display: flex;
        align-items: center;
        width: 52px;
        height: 50px;
    }
    header>.arrow_back>img {
        width: 10px;
    }
    header>.choose_moreitems {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 34px;
        height: 50px;
    }
    header>.choose_moreitems>img {
        width: 24px;
        height: 24px;
    }
    header>.nav_header {
        flex: 1;
        text-align: center;
    }
    .dropdown-menu {
        min-width: 106px;
        font-size: 14px;
    }
    .dropdown-menu li {
        margin-bottom: 7px;
    }
    .dropdown-menu img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
    }
    .orders>ul {
        display: flex;
        height: 43px;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }
    .orders>ul>li:nth-child(1) {
        font-family: PingFangSC-Medium;
        font-size: 12.5px;
        color: #222;
    }
    .orders>ul>li:nth-child(n+2) {
        font-family: PingFangSC-Regular;
        font-size: 12.5px;
        color: #999;
    }
    .orders>ul>li:nth-child(n+2)::before {
        content: ">";
        font-weight: bolder;
        color: #aaa;
        margin: 0 10px;
    }
    .input_phonenumber {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 43px;
        padding: 0 10px;
        margin: 15px 0;
        background-color: #fff;
    }
    .input_phonenumber>input {
        flex: 1;
        height: 30px;
        border: none;
        outline: none;
    }
    input::-webkit-input-placeholder {
        font-size: 14px;
    }
    input[type="checkbox"] {
        -webkit-appearance: none;
        width: 22px;
        height: 22px;
        margin: -3.5px 5px 0 10px;
        border-radius: 3px;
        border: 1px solid #DDD8CE;
        text-align: center;
        vertical-align: middle;
        line-height: 22px;
        outline: 0;
    }
    .btn-wrapper {
        padding-bottom: 10px;
        font-size: 14px;
        color: #333;
    }
    .protocol {
        text-decoration: none;
        color: #FE8C00;
    }
    .get_verify_code {
        padding: 0 10px;
        height: 50vh;
    }
    .get_verify_code>button {
        width: 100%;
        height: 43px;
        padding: 0 16px;
        border-radius: 10px;
        text-align: center;
        font-size: 18px;
        vertical-align: middle;
        line-height: 43px;
        box-sizing: border-box;
        background: #dcdcdc;
        color: #999;
        border: 0;
    }
</style>


